.listingDetail {
  .topControls {
    position: relative;

    .deleteConfirm {
      right: -46px;
      top: 50px;
    }
  }

  .modalContent {
    .storeOwnerAvatar {
      width: 24px;
      height: 24px;
      float: left;
    }

    .listingContent {

      .mainImageWrapper {
        flex-shrink: 0;

        .mainImage {
          width: 530px;
          height: 530px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          border-width: 1px;
          border-style: solid;
          border-radius: $corner;
          margin-bottom: $pad;
          cursor: pointer;
        }
      }

      .buyBox {
        border-width: 1px;
        border-style: solid;
        border-radius: $corner;
        box-sizing: border-box;
        padding: $padLg $pad * 4;
        margin-bottom: $padLg;
      }

      .tagWrapper {
        overflow: auto; // clear floats

        .tag {
          float: left;
          margin: 0 $padSm $padSm 0;
          font-size: $tx5b;
          font-weight: 400;
          padding: 0 $pad;
        }
      }

      .verifiedModBox {
        display: block;
        border-width: 2px;
        border-style: solid;
        padding: $padMd;
        text-align: center;

        .badge {
          width: 24px;
          height: 24px;
          background-size: contain;
        }
      }

      .acceptedCurName {
        // line height makes the text not vertically centered - want to preserve line height in
        // the unlikely case a crypto name is so long that it needs to wrap
        position: relative;
        top: 1px;
      }

      .descriptionSection {

        img {
          max-width: 100%;
          height: auto;
        }
      }

      .photoSection {
        background: #000000; // the photo carousel should always be black
        height: 701px;

        .photoSelected {
          height: 100%;
          cursor: zoom-in;

          &.unzoomable {
            cursor: auto;
          }

          &.open {
            cursor: zoom-out;

            .photoSelectedInner {
              display: none;
            }
          }

          .photoSelectedInner {
            max-width: 100%;
            max-height: 100%;
            display: block;
          }
        }

        .photoPrev,
        .photoNext {
          background-color: rgba(37,37,37,0.7);
          border: 0;
          width: 90px;
          height: 90px;
          font-size: 70px;
          color: #fff;
          opacity: 0;
          transition: opacity 1s;
          @include center(false, true);
          z-index: 2;
        }

        .photoPrev {
          left: 0;

          &:before {
            padding-right: 10px; // tweak centering visually
          }
        }

        .photoNext {
          right: 0;

          &:before {
            padding-left: 10px; // tweak centering visually
          }
        }

        &:hover .photoPrev,
        &:hover .photoNext {
          opacity: 1;
        }

        .cropit-image-zoom-input {
          position: absolute;
          bottom: 100px;
          width: 90%;
          margin: 0 5%;
        }

        .photoStrip {
          position: absolute;
          z-index: 1;
          bottom: 0;
          left: 0;
          right: 0;
          padding: $pad;
          background-color: rgba(37,37,37,0.7);
          overflow-x: auto;

          input[type="radio"] {
            display: none;
          }

          label {
            height: 60px;
            width: 60px;
            box-sizing: border-box;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: 0 0 0 2px rgba(0,0,0,0), inset 0 0 0 3px rgba(256, 256, 256, 0);
            transition: box-shadow 0.25s;
            flex-shrink: 0;
            cursor: pointer;
          }

          input[type="radio"]:checked + label {
            box-shadow: 0 0 0 2px rgba(0,0,0,0.5), inset 0 0 0 3px rgba(256, 256, 256, 1);;
          }
        }
      }

      .rating {
        cursor: pointer;
      }

      .reviews {
        .loadMore {
          padding-top:$padLg;
          margin-top: $padLg;
          border-top-style: solid;
          border-top-width: 1px;
        }
      }

      #shippingSection {
        .shippingTable {
          width: 100%;
          margin-top: $pad;
          table-layout: fixed;

          th {
            font-weight: 700;
            text-align: left;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: inherit;
            border-top-style: solid;
            border-top-width: 1px;
            border-top-color: inherit;
            width: 28%;
            padding: $padMd 0;
          }

          th:first-child {
            width: 46%;
          }

          td {
            padding: $pad 0;
          }

          tr.lastRow td {
            padding-bottom: $padLg;
          }
        }
      }

      .cryptoTitle {
        .exchangeRateLine {
          font-weight: normal;
          display: inline;
          font-size: 1.3rem;
          position: relative;
          top: -2px;
          margin-left: 3px;
        }
      }      
    }
  }
}
